<template>
	<div>
		<van-nav-bar
			title="确认订单"
			left-text="返回"
			left-arrow
			@click-left="this.$router.go(-1)" />

		<template v-if="address.id">
			<van-contact-card
				type="edit"
				:tel="address.mobile"
				:name="address.consignee"
				@click="onEdit" />
		</template>

		<template v-else>
			<van-contact-card
				add-text="添加收货地址"
				type="add"
				@click="onEdit" />
		</template>

		<div id="over">
			<template v-if="!isShop">
				<van-card
					v-for="shop in buyShop"
					:key="shop.id"
					:price="shop.total"
					:title="shop.product.name"
					:num="shop.nums"
					class="goods-card">
					<template #tags>
						<div>单价: {{ shop.price }}</div>
					</template>
					<template #thumb>
						<img :src="shop.product.thumb_swiper" />
					</template>
				</van-card>
			</template>

			<template v-else>
				<van-card
					:price="buyShop.price"
					:title="buyShop.name"
					:num="total"
					class="goods-card">
					<template #tags>
						<div>单价: {{ buyShop.price }}</div>
					</template>
					<template #thumb>
						<img :src="buyShop.thumb_swiper" />
					</template>
				</van-card>
			</template>

			<van-cell-group inset>
				<van-field
					v-model="message"
					rows="4"
					autosize
					label="备注"
					type="textarea"
					maxlength="80"
					placeholder="请输入备注"
					show-word-limit />
			</van-cell-group>
		</div>
		<van-submit-bar
			:price="total"
			button-text="提交订单"
			@submit="onSubmit" />

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showSuccessToast, showToast, showFailToast } from "vant";
	export default {
		created() {
			// 获取商品的id
			if (this.$route.query.buyId) {
				this.buyId = this.$route.query.buyId.split(",");
			} else if (this.$route.query.shopId) {
				this.isShop = true;
				this.buyId = this.$route.query.shopId.split(",");
			}
			// 有地址信息就使用地址信息没有会使用默认，没有默认会让用户添加
			let address = this.$route.query.address ? this.$route.query.address.split(",") : false;
			this.notarize(address);
		},
		data() {
			return {
				// 储存商品id
				buyId: [],
				// 储存商品信息
				buyShop: [],
				// 储存收货地址
				address: {},
				// 总价，渲染时x100，发给后台要除100
				total: 0,
				// 订单备注
				message: "",
				// 判断路由的参数是shopId还是buyId
				isShop: false,
				// 判断显示
				show: null,
				// 加载
				isLoading: false
			};
		},
		methods: {
			async notarize(info) {
				// 没有商品信息就返回
				if (this.buyId.length == 0) {
					this.$router.go(-1);
				}
				let res = null;
				// 获取商品信息
				this.isLoading = true;
				if (this.isShop) {
					res = await this.$api.NotarizeShop({
						shopid: this.buyId,
						busid: this.$cookies.get("User").id,
					});
				} else {
					res = await this.$api.NotarizeShop({
						buyid: this.buyId,
						busid: this.$cookies.get("User").id,
					});
				}

				if (res.code == 1) {
					// 这里如果没有就是使用默认地址
					if (info) {
						this.address = { id: info[0], consignee: info[1], mobile: info[2] };
					} else {
						this.address = this.$cookies.get("User").address;
					}
					this.buyShop = res.data[0];
					this.total = res.data[1];
					this.show = res.data[2];
				} else {
					this.$router.go(-1);
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
				// console.log(this.buyShop);
			},
			// 修改收获地址
			onEdit() {
				// 把id传入方便选择地址后跳转回来
				// 判断是购物车购买还是商品购买
				if (this.isShop) {
					this.$router.push({
						path: "/address/index",
						query: { shopId: this.$route.query.shopId },
					});
					return;
				}
				this.$router.push({ path: "/address/index", query: { buyId: this.$route.query.buyId } });
			},
			// 提交订单
			async onSubmit() {
				// 没有收货地址
				this.isLoading = true;
				if (this.address.id == null) return showToast("请添加收货地址");
				let res = await this.$api.BuyShop({
					// 地址id
					address: this.address.id,
					// 购买的订单id
					buyId: this.isShop ? this.$route.query.shopId : this.$route.query.buyId,
					// 用户id
					busid: this.$cookies.get("User").id,
					// 备注
					msg: this.message,
					// 判断是直接买商品还是在购物车买
					isShop: this.isShop,
				});

				if (res.code == 1) {
					showSuccessToast({
						message: res.msg,
					});
					this.$router.push("/business/order");
				}else{
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
			},
		},
	};
</script>

<style scoped>
	#over {
		margin-top: 5px;
		width: 100%;
		max-height: 600px;
		overflow-y: auto;
	}
</style>
